Day 8 繪製彎彎曲曲的路線

11th鐵人賽

阿瑜

2019-09-09 00:17:09

1659 瀏覽

分享至

<< 補充 >>

移除放大縮小鍵(預設地圖都有)

mymap.removeControl(mymap.zoomControl);

Custom Icon 定錨位置
弄懂定錨(iconAnchor的重要性) ↓

    var LeafIcon = L.Icon.extend({
		options: {
			iconSize:     [24, 24],
			iconAnchor:   [12, 12], // point of the icon which will correspond to marker's location ?
			popupAnchor:  [0, -12]  // point from which the popup should open relative to the iconAnchor
		}
	});

其實官網的解釋，我有點不太懂。
那就東調調(iconAnchor的數值)西調調(大小取小:上圖)，看調出來的感覺哪個比較不誇張...
上圖原本車頭向左的黑色車子，可能會有倒退嚕(往右開)的情況，所以換成黃色車頭正面圖 XD，就不會有這怪怪的現象。
但還是要追根究底一下，總不能之後遇到相同的狀況，還是東調西調，有點兒浪費時間~~~
在StackOverflow我得到很好的解答。

截圖自:Explanation of Leaflet Custom Icon LatLng vs XY Coordinates

切回正題

沒有比較沒有進步

圖1 : 台中公車通截圖
圖2 : 本Web (MLX友廷等公車)
圖3 : 改良版 (MLX友廷等公車)

台中公車通(現有手機APP)，是如何畫線的，我猜應該就是拿API提供的站牌經緯度資料做連線。
推測原因，看圖2 vs 圖3 ，路線形狀根本一樣，而我圖2就是拿API提供的站牌經緯度資料做連線(回到Day6)。

那如何改良呢? Ans : 使用動態資訊
Sol :
Google Maps 查了一下台中火車站到鹿港大概需要幾分鐘，60分鐘。
寫 Code 收集每隔一段時間(1分鐘)的位置資料，放入資料庫裡。
60 個點能完成彎曲路線的繪製。

凡開過必留下痕跡

假設我們已有那些點(大概60點)，之後會分享如何得出的實作步驟。

<script type="text/javascript" src="latlon.json"></script>

// 61個點 // latlon.json
data = '[[緯度1,經度1],[緯度2,經度2],[]...]';

設計原理:
將 latlon.json 的座標點取出，如果距離超過10公里不連線。因為可能是連回出發點位置(如圖↓)。

不加入離太遠的那一點，把現有的線段畫出。
如果經緯度都沒有超過10km的點，加入list，最後顯示。

  var mydata = JSON.parse(data);
   
    console.log(mydata)
    var temp = [];
    for(var i=0;i<mydata.length;i++)
    {
        if(i==0) temp.push(mydata[i]);
        else
        {
            if(GetDistance(mydata[i][0],mydata[i][1],mydata[i-1][0],mydata[i-1][1])>10)
            {
                var polyline = L.polyline(temp, {color: 'red'}).addTo(mymap);
                mymap.fitBounds(polyline.getBounds());
                temp = [];
            }
            else
            {
                temp.push(mydata[i]);
            }
            
        }
    }
    var polyline = L.polyline(temp, {color: 'red'}).addTo(mymap);
    mymap.fitBounds(polyline.getBounds());
    function GetDistance( lat1,  lng1,  lat2,  lng2){
    var radLat1 = lat1*Math.PI / 180.0;
    var radLat2 = lat2*Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
    s = s *6378.137 ;// EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000;
    return s;
    }